<script setup lang="ts">
import { computed, onMounted, ref, toRefs, watch } from "vue";
interface Props {
  modelValue: boolean;
  type: "left" | "top" | "bottom" | "center" | "right";
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  type: "bottom",
});
const emits = defineEmits(["update:modelValue"]);
const { modelValue } = toRefs(props);
const popupRef = ref();

const open = () => {
  popupRef.value?.open(props.type);
};
const close = () => {
  popupRef.value?.close();
};

watch(modelValue, (Val) => {
  if (Val) {
    open();
  } else {
    close();
  }
});

onMounted(() => {
  if (modelValue.value) {
    open();
  }
});
const handleMask = () => {
  emits("update:modelValue", false);
  close();
};
</script>

<template>


  <uni-popup
    ref="popupRef"
    :is-mask-click="false"
    @maskClick="handleMask"
    :type="type"
  >
    <div>222
      <slot></slot>
    </div>
  </uni-popup>
</template>

<style lang=""></style>
